<template>
  <div>
    <SearchBar
      :focus="focusFlag"
      @onChange="onChange"
      @onConfirm="onConfirm"
      @onClearClick="onClearClick"
      ref="searchBar"
    />
    <TagGroup
      header-text="热门搜索"
      btn-text="换一批"
      :value="hotSearchTitle"
      @onTagClick="showBookDetail"
      @onBtnClick="changeHotSearch"
      v-if="!showList"
    />
    <TagGroup
      header-text="历史搜索"
      btn-text="清空"
      :value="historySearch"
      @onTagClick=" item => historyKeyWord(item)"
      @onBtnClick="clearHistorySearch"
      v-if="historySearch.length > 0 && !showList"
    />

    <SearchList
      :data="searchList"
      v-if="showList"
    />


  </div>
</template>

<script>
  import SearchBar from "../../components/home/SearchBar.vue";
  import TagGroup from "../../components/base/TagGroup.vue";
  import SearchList from "../../components/search/SearchList.vue";
  import {search,hotSearch} from "../../api";
  import {showToast} from '../../api/wechat';
  export default {
    name: "search",
    components: {
      SearchList,
      SearchBar,
      TagGroup
    },
    computed: {
      showList(){
        const hasList = Object.keys(this.searchList);
        return hasList.length > 0;
      },
    },
    mounted(){
      this.hotSearch();
    },
    data() {
      return {
        focusFlag : true,
        hotSearchTitle : [],
        historySearch : mpvue.getStorageSync('historyList') || [],
        searchList : {},
        openId : mpvue.getStorageSync('openId'),
        hotSearchKeyWord : '',
        page : 1,
      };
    },
    methods: {
      onConfirm(keyWord){
        this.focusFlag = false;
        if (  !keyWord && keyWord.trim().length === 0){
          keyWord = this.$refs.searchBar.hotSearch;
          this.$refs.searchBar.searchWord = keyWord;
        }
        this.onSearch(keyWord);
        this.hotSearchKeyWord = keyWord;
        if (this.hotSearchKeyWord && this.hotSearchKeyWord.trim().length > 0){
          if (!this.historySearch.includes(this.hotSearchKeyWord)) {
            this.historySearch.push(this.hotSearchKeyWord);
            mpvue.setStorageSync('historyList',this.historySearch);
          }
        }
      },
      onChange(keyWord){   //搜索框内容变化时
        this.focusFlag = true;
        this.page = 1;
        if (!keyWord || keyWord.trim().length === 0) {
          this.searchList = {};
          return;
        }
        this.onSearch(keyWord);

      },
      onClearClick(){
        this.searchList = {};
      },
      onSearch(keyword){
        search({
          keyword,
          openId : this.openId,
        }).then(response=>{
          this.searchList = response.data;
        });
      },
      hotSearch(){
        hotSearch().then(response=>{
          response.data.data.forEach((item,i)=>{
            this.hotSearchTitle.push(item.title);
          });
        });
      },
      changeHotSearch() {  //换一批
        console.log("换一批");
        this.hotSearchTitle = [];
        this.hotSearch();
      },
      showBookDetail(){    //热词书本详情
        console.log("热词书本详情");

      },
      clearHistorySearch(){ //清除历史记录
        this.historySearch = [];
        mpvue.setStorageSync('historyList',[]);
      },
      historyKeyWord(keyWord){  //历史搜索
       this.$refs.searchBar.setValue(keyWord);
        this.onSearch(keyWord);
      },
    },
    onReachBottom(){
      this.page++;
      let keyword = this.$refs.searchBar.getValue();
      if (keyword && keyword.trim().length > 0) {
        search({
          keyword,
          openId : this.openId,
          page : this.page,
        }).then(response=>{
          this.searchList.data.book.push(...response.data.data.book);
          let book = response.data.data.book;
          if (book && book.length === 0) {
            console.log("no");
            showToast('没有更多数据了!');
          }
        });
      }
    },
    onPageScroll(){
      if (this.focusFlag) {
        this.focusFlag = false;
      }
    },
  };
</script>

<style scoped>

</style>
